{extend name="public/pure"}
{block name="style"}
<title>在线商城</title>
<link rel="stylesheet" href="/home/css/common/tip.css">
<link rel="stylesheet" href="/home/css/commodity/footer.css">
<link rel="stylesheet" href="/home/css/commodity/index.css">

{/block}
{block name="body"}
<div class="scroll">
    <div class="searchCustom">
        <div class="search fl">
            <a href="/home/commodity/search.html"><span>请输入商品关键字</span></a>
        </div>
        <div class="custom fr">
            <span>客服</span>
        </div>
    </div>
    <div class="content">
        <div class="lists">
            <ul class="clearfix">

                {volist name="data" id="vo"}
                <li class="fl">
                    <a href="{:Url('Commodity/detail?id='.$vo['id'])}" class="list">
                        <div class="img"><img src="/home/images/commodity/block.png" alt="" data-original="{$vo.front_cover}" class="lazy"></div>
                        <div class="content">
                            <p class="title">{$vo.title}</p>
                            <div class="priceNum clearfix">
                                <span class="fl price">￥<span>{$vo.price1}</span>.<span class="span">{$vo.price2}</span></span>
                                <span class="fr num">库存{$vo.stock}</span>
                            </div>
                        </div>
                    </a>
                </li>
                {/volist}

            </ul>
        </div>
    </div>
    <div class="tip"></div>
    <div class="loading hidden">
        <div class="typing_loader"></div>
    </div>
    <div class="footer">
        <ul class="clearfix">
            <li class="fl">
                <a href="/home/commodity/index.html">
                    <div class="img"><img src="/home/images/commodity/home_1.png" alt=""></div>
                    <div class="name">首页</div>
                </a>
            </li>
            <li class="fl">
                <a href="/home/order/index.html">
                    <div class="img"><img src="/home/images/commodity/address.png" alt=""></div>
                    <div class="name">订单</div>
                </a>
            </li>
            <li class="fl">
                <a href="/home/cart/index.html">
                    <div class="img"><img src="/home/images/commodity/shopping.png" alt=""></div>
                    <div class="name">购物车</div>
                </a>
            </li>
            <li class="fl">
                <a href="/home/address/index.html">
                    <div class="img"><img src="/home/images/commodity/car.png" alt=""></div>
                    <div class="name">地址</div>
                </a>
            </li>
        </ul>
    </div>
</div>

<!-- 客服-->
<div class="showdow"></div>
<div class="kefu">
    <div class="img">
        <img src="/home/images/commodity/kefu.png" alt="">
    </div>
    <div class="content">
        商城客服将会全心全意为您提供满意周到的咨询服务，也希望您能支持和监督我们的服务！
    </div>
    <div class="btn">
        <a href="tel:88722001">
            <span>拨打客服热线</span>
        </a>
    </div>
    <p>求助人工服务，获得快速解答</p>
</div>

{/block}
{block name="script"}
<script src="/home/js/reset.js"></script>
<script>
    $(function(){
        // 初始化
        var len = $('.lists').find('.list').length;
        if(len >= 12){
            $('.tip' ).text('上拉加载更多');
            document.getElementsByClassName("scroll")[0].addEventListener('scroll',loadScroll);

        }
    });

    var scrollNow = true;
    function loadScroll(){
        var tabList = $(".lists");
        var len = tabList.find('.list').length;
        var tip = $(".tip");
        var loading = $('.loading');
        var el = document.getElementsByClassName("scroll")[0];
        if(el.scrollTop + el.offsetHeight + 2 >= el.scrollHeight && scrollNow){
            scrollNow = false;//请求执行中
            $.ajax({
                type: 'post',
                url: "{:Url('Commodity/listMore')}",
                data: {
                    length:len
                },
                beforeSend: function(XMLHttpRequest){
                    tip.hide();
                    loading.toggleClass('hidden');
                },
                success:function(data){
                    loading.toggleClass('hidden');
                    tip.show();
                    if(data.code == 1){
                        addList(data);
                        if(data.data.length == 6){
                            tip.text('上拉加载更多');
                        }else{
                            tip.text('没有更多了');
                            document.getElementsByClassName("scroll")[0].removeEventListener('scroll',loadScroll);
                        }
                    }else{
                        tip.text('没有更多了');
                        document.getElementsByClassName("scroll")[0].removeEventListener('scroll',loadScroll);
                    }
                    lazy();
                    scrollNow = true;//请求结束
                }
            })
        }
    }

    function addList(data){
        var date = data.data;
        var html = '';
        for(var i = 0; i < date.length; i++) {
            html += '<li class="fl">'
                    +'<a href="/home/commodity/detail/id/'+ date[i].id +'.html" class="list">'
                    +'<div class="img"><img src="/home/images/commodity/block.png" alt=""  data-original="'+ date[i].front_cover +'" class="lazy"></div>'
                    +'<div class="content">'
                    +'<p class="title">'+ date[i].title +'</p>'
                    +'<div class="priceNum clearfix">'
                    +'<span class="fl price">￥<span>'+ date[i].price1 +'</span>.<span class="span">'+ date[i].price2 +'</span></span>'
                    +'<span class="fr num">库存'+ date[i].stock +'</span>'
                    +'</div>'
                    +'</div>'
                    +'</a>'
                    +'</li>';
        }
        $(".lists ul").append(html);
    }


    var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop
                    , totalScroll = el.scrollHeight
                    , currentScroll = top + el.offsetHeight;
            if(top === 0) {
                el.scrollTop = 1;
            } else if(currentScroll === totalScroll) {
                el.scrollTop = top - 1;
            }
        });
        el.addEventListener('touchmove', function(evt) {
            if(el.offsetHeight < el.scrollHeight)
                evt._isScroller = true;
        });
    };

    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function(evt) {
        if(!evt._isScroller) {
            evt.preventDefault();
        }
    });

    // 客服弹窗
    $(".custom").on("click", function () {
        $(".showdow,.kefu").show();
    });

    $(".showdow").on("click", function () {
        $(this).hide();
        $(".kefu").hide();
    });

    // 图片懒加载
    function lazy() {
        $("img.lazy").lazyload({
            placeholder: "/home/images/commodity/loading.jpg",
            effect: "fadeIn",
            threshold: 1
        });
    }
    lazy();

</script>
{/block}